<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />

    <el-card v-if="detail" class="mt-4">
      <template #header></template>
      
      <!-- …更多字段… -->
<div class="order-detail-status">
    <div class="left">
      <div class="status-title">订单状态：{{ statusText }}</div>
      <div class="btn-group">
        <el-button plain size="small">订单跟踪</el-button>
        <el-button plain size="small">调度跟踪</el-button>
      </div>
    </div>
    <div class="right">
      <div class="steps">
        <div
          v-for="(step, idx) in steps"
          :key="step.label"
          class="step"
        >
          <div
            class="circle"
            :class="{
              finished: idx < currentStep,
              active: idx === currentStep
            }"
          >
            <template v-if="idx < currentStep">
              <el-icon><Check /></el-icon>
            </template>
            <template v-else>
              {{ idx + 1 }}
            </template>
          </div>
          <div class="label">{{ step.label }}</div>
          <div v-if="idx < steps.length - 1" class="line"></div>
        </div>
      </div>
    </div>
  </div>


    </el-card>

    <el-empty v-else description="加载中…" />
  </div>

  
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail } from '@/api/order'   // ← 确保已实现 export

/* 路由参数 */
const route = useRoute()
const id = ref(route.params.id)        // 保证响应式

/* 数据与状态 */
const detail   = ref(null)
const loading  = ref(false)
const errorMsg = ref('')

/* 配送状态字典 */
const statusMap = {
  1: { text: '待骑手接单', step: 1 },
  2: { text: '骑手配送中', step: 2 },
  3: { text: '已送达', step: 3 },
  4: { text: '已完成', step: 4 }
  // 你可以根据实际后端状态码补充
}

/* 核心：拉取订单详情 */
async function fetchDetail (orderId) {
  loading.value  = true
  detail.value   = null
  errorMsg.value = ''
  try {
    const resp = await getOrderDetail(orderId)
    detail.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}

/* 首次进入页面拉数据 */
onMounted(() => fetchDetail(id.value))

/* 若同一个组件复用，监听路由参数变化自动刷新 */
watch(
  () => route.params.id,
  newId => {
    id.value = newId
    fetchDetail(newId)
  }
)

</script>
